<template>
  <div>
    <a-button type="primary" style="margin-top: 16px;" @click="handleAdd">新增</a-button>

    <a-table
        :columns="columns"
        :data-source="pagedData"
        :pagination="false"
        :row-key="record => record.id"
        style="margin-top: 16px; background-color:whitesmoke;"
    >
      <!-- 自定义渲染头像列 -->
      <template slot="avatar" slot-scope="text, record">
        <a-avatar
            :src="record.avatar || defaultAvatar"
            :size="64"
            @error="handleAvatarError"
        />
      </template>
      <template slot="status" slot-scope="{ text, record }">
        <a-switch
            :checked="text === '启用'"
            @change="() => handleChangeStatus(record)"
        />
      </template>
      <template slot="Controls" slot-scope="{ record }">
        <a-button type="link" @click="handleEdit(record)">编辑</a-button>
        <a-button type="link" @click="handleEdits(PermissionSetting)">权限设置</a-button>
        <a-popconfirm
            title="确定删除此管理员吗？"
            @confirm="handleDelete(record)"
        >
          <a-button type="link" style="color: red">删除</a-button>
        </a-popconfirm>
      </template>
    </a-table>

    <!-- 分页和数据统计 -->
    <div
        style="margin-top: 16px; margin-left: 80%; display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #666;">
      <div>
        <span>共 {{ filteredData.length }} 条数据</span>
        <span style="margin-left: 10px;">每页显示 {{ pageSize }} 条</span>
        <span style="margin-left: 10px;">当前第 {{ currentPage }} 页</span>
      </div>
    </div>

    <a-pagination
        :current="currentPage"
        :total="filteredData.length"
        :page-size="pageSize"
        @change="handlePageChange"
        style=" text-align: center; width: 100%;"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: {
        adminAccount: '',
        adminName: '',
        adminRole: '全部',
      },
      columns: [
        {title: 'ID', dataIndex: 'id', key: 'id'},
        {title: '名称', dataIndex: 'Name', key: 'Name'},
        {title: '备注', dataIndex: 'Remarks', key: 'Remarks'},
        {title: '排序', dataIndex: 'Sorting', key: 'Sorting'},
        {title: '管理人数', dataIndex: 'Number', key: 'Number'},
        {title: '创建时间', dataIndex: 'CreationTime', key: 'CreationTime'},
        {title: '操作', key: 'Controls', scopedSlots: {customRender: 'Controls'}},
      ],
      data: [
        {
          id: 1,
          Remarks: '无',
          adminName: '张三',
          Name: '管理员',
          Sorting: '无',
          Number: '3',
          CreationTime: '2024-11-25 10:03:16',
          status: '启用'
        },
        {
          id: 2,
          Remarks: '无',
          adminName: '张三',
          Name: '超级管理员',
          Sorting: '无',
          Number: '1',
          CreationTime: '2014-15-15 10:03:16',
          status: '禁用'
        },
      ],
      currentPage: 1,
      pageSize: 10,
    };
  },
  computed: {
    filteredData() {
      const {adminAccount, adminName, adminRole} = this.search;
      return this.data.filter(item => {
        return (
            (!adminAccount || item.adminAccount.includes(adminAccount)) &&
            (!adminName || item.adminName.includes(adminName)) &&
            (adminRole === '全部' || item.adminRole === adminRole)
        );
      });
    },
    pagedData() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.filteredData.slice(startIndex, endIndex);
    },
  },
  methods: {
    handleAvatarError(event) {
      event.target.src = this.defaultAvatar;
    },
    handleSearch() {
      console.log('搜索');
    },
    handleReset() {
      this.search = {
        adminAccount: '',
        adminName: '',
        adminRole: '全部',
      };
    },
    handleAdd() {
      console.log('新增');
    },
    // handleChangeStatus(record) {
    //   record.status = record.status === '启用' ? '禁用' : '启用';
    // },
    handlePageChange(page) {
      this.currentPage = page;
      console.log('页码改变:', page);
    },
    handleEdit(record) {
      console.log('编辑', record);
    },
    handleEdits(PermissionSetting) {
      console.log('编辑', PermissionSetting);
    },
    // handleDelete(record) {
    //   console.log('删除成功');
    // },
  },
}
</script>

<style scoped>
/* 在这里可以添加样式 */
</style>
